<template>
  <div class="categories-box">
        <el-card shadow="never">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card> 

        <div class="categories-table">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-button type="primary">添加分类</el-button>
                </el-col>
            </el-row>

            <zk-table
                ref="table"
                index-text="#"
                :data="categoriesList"
                :columns="columns"
                :show-index="true"
                :border="true"
                :show-header="true"
                :show-row-hover="true"
                :tree-type="true"
                :is-fold="true"
                :expand-type="false"
                :selection-type="false">
                <template slot="level" scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <template slot="edit" scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
                </template>
            </zk-table>

             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            categoriesList: [],
            query: {
                type: '',
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                    width: '400px',
                },
                {
                    label: '分类层级',
                    prop: 'cat_level',
                    type: 'template',
                    template: 'level',
                    width: '200px',
                },
                {
                    label: '操作',
                    prop: 'edit',
                    type: 'template',
                    template: 'edit',
                    width: '200px', 
                },
                
            ],
        }
    },
    created() {
        this.getCategoriesList()
    },
    methods: {
        handleSizeChange(val) {
            this.query.pagesize = val
            this.getCategoriesList()
        },
        handleCurrentChange(val) {
             this.query.pagenum = val
            this.getCategoriesList()
        },
        async getCategoriesList() {
            const {data} = await this.$http.get(`/categories`, {
                params: this.query
            })

            if(data.meta.status !== 200) {
                return this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }

            this.categoriesList = data.data.result
            this.total = data.data.total - 0
        }
    }
}
</script>

<style scoped lang="less">
.categories-box {
    .categories-table{ 
        padding: 10px;
    }
    .el-row{
        margin-bottom: 10px;
    }
    .el-pagination{
        margin-top: 10px;
    }
}
</style>